<template>
  <div class="monitor_item w100">
    <div class="item_title flex-x">
      <img
        src="@/assets/images/shebeiIcon/msg_7.png"
        style="width: 11px; height: 11px; margin-right: 4px"
        alt=""
      />
      <div class="title_text">设备时间</div>
    </div>
    <div class="chart w100 h-full" ref="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineChart: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 500);
  },
  methods: {
    init() {
      let rich = {
        white: {
          align: "center",
          color: "#fff",
          padding: [3, 0],
        },
      };
      let func = (params) => {
        console.log("params :>> ", params);
        let percent = params.value;
        let name = params.name.replace(/\n/g, "");
        if (params.name !== "") {
          return name + "\n{white|" + percent + "}";
        } else {
          return "";
        }
      };
      var sData = [
        {
          name: "非生产时间",
          value: "40000",
        },
        {
          name: "本批任务剩余时间",
          value: "53000",
        },
        {
          name: "在线时间",
          value: "40000",
        },
      ];
      // var legendData1 = ["大白", "长大", "杜洛克", "约克猪"]
      // var legendData2 = ["二元", "三元", "大长","PIC"]

      var legendData1 = [];
      var legendData2 = [];
      for (var i = 0; i < sData.length; i++) {
        var halfLength = Math.ceil(sData.length / 2);
        var itemName = sData[i].name;
        if (i < halfLength) {
          legendData1.push(itemName);
        } else {
          legendData2.push(itemName);
        }
      }
      var colorList = [
        "#0066FF",
        "#2E2EE6",
        "#4400CC",
        "#00AACC",
        "#9BBF30",
        "#E60000",
        "#92368D",
        "#BF9926",
      ];
      const option = {
        tooltip: {
          trigger: "item",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
        },

        series: [
          {
            type: "pie",
            z: 3,
            center: ["50%", "40%"],
            radius: ["30%", "45%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "outside",
              formatter: func,
              rich: rich,
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: sData,
          },
          {
            name: "第一层环",
            type: "pie",
            z: 2,
            tooltip: {
              show: false,
            },
            center: ["50%", "40%"],
            radius: ["45%", "58%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 1,
                shadowColor: "rgba(53,139,255,.3)",
                color: "rgba(1,15,80,.95)",
              },
              emphasis: {
                color: "rgba(1,15,80,.95)",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      };

      this.$nextTick(() => {
        if (!this.lineChart) {
          this.lineChart = this.$echarts.init(this.$refs.chart);
        }
        this.lineChart.setOption(option);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.monitor_item {
  margin-top: 20px;
  .item_title {
    width: 100%;
    height: 26px;
    background: linear-gradient(-90deg, #000949, #1c349a);
    padding-left: 10px;
    border-radius: 5px;
    .title_text {
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>